<template>
    <div class="main">
        <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" />
            <van-dropdown-item v-model="value2" :options="option2" />
        </van-dropdown-menu>
        <van-row style="color: rgb(0, 108, 0);padding: 10px;">
            <van-col span="7">测试学生3</van-col>
            <van-col span="7">33333333</van-col>
            <van-col span="8">22软件技术3班</van-col>
        </van-row>
        <van-search v-model="value" placeholder="搜索" />
        <van-collapse v-model="activeNames" accordion>
            <van-collapse-item 
                v-for="item in data"
                :key="item.id"
                :title="item.name"
                :value="item.submit?'访问链接':'未作答'"
                :label="item.class"
            >
                <van-cell-group>
                    <van-cell title="得分" :value="item.score!=undefined?item.score:'未评'" />
                    <van-cell title="浏览" is-link :url="item.browse" value="打开/下载" />
                    <van-cell title="评语" :value="item.comment" />
                </van-cell-group>
            </van-collapse-item>
            
        </van-collapse>

    </div>
    

</template>
<script setup>
    import { ref } from 'vue';
    const activeNames = ref(['1']);
    const value1 = ref(0);
    const value2 = ref('a');
    const switch1 = ref(false);
    const switch2 = ref(false);
    const switch3 = ref(false);
    const option1 = [
      { text: '前端框架应用项目开发', value: 0 },
      { text: '专业技能综合实践（2024春季）', value: 1 },
      { text: '24春季进销存系统设计与实现', value: 2 },
      { text: '后端技术与项目开发', value: 3 },
      { text: '软件测试技术', value: 4 },
    ];
    const option2 = [
        { text: '任务类型', value: 'a' },
        { text: '刷题', value: 'b' },
        { text: '作品', value: 'c' },
    ];
    const data= [
        {
            id: 0,
            name: 'Vue3开发初体验',
            score: 95,
            comment: '等级自动换算得分',
            submit: true,
            browse: "https://codelover.club/files/stutasks/userID_791/currNo_43/FhSG22N-mj5Re8XgecBD6sGA-VjR/index.html"
        },
        {
            id: 1,
            name: 'Vue3组件化开发',
            score: 95,
            comment: '拆分组件，有美化，功能齐全，有gitee',
            submit: true,
            browse: "https://codelover.club/files/stutasks/userID_791/currNo_43/Fu6CKtTiKz9kcUoPYBhRrg6sYysB/index.html"
        },
        {
            id: 2,
            name: 'Vue3路由的使用',
            score: 85,
            comment: '完成部分组件，无法切换事件的状态，内容还可以再完善一下',
            submit: true,
            browse: "https://codelover.club/files/stutasks/userID_791/currNo_43/Fkon9mKwVDwUTwtlcszxA_nDlIqU/index.html#/"
        },
        {
            id: 3,
            name: '电影列表项目',
            score: 95,
            comment: '',
            submit: true,
            browse: "https://codelover.club/files/stutasks/userID_791/currNo_43/FvakHS-CuyV7r3_nCUTx8kClN-Sh/index.html#/"
        },
        {
            id: 4,
            name: '状态管理Pinia',
            score: undefined,
            comment: '',
            submit: false,
            browse: ""
        }
    ]

</script>

<style scoped>
    .main{
        width: 100%;
    }
    .a1{
        background-color: antiquewhite;
    }
</style>